<template>
  <section class="xmv-badges xmv-wrap">
    <h4>picker</h4>
    <div class="demo-markup-source u-letter-box--small c-text">
      <xm-picker :slots="yearSlot" @change="onYearChange" :visible-item-count="3"></xm-picker>
      <p class="page-picker-desc">出生年份: {{ year }}</p>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
          &ltxm-picker :slots="yearSlot" @change="onYearChange" :visible-item-count="3"&gt&lt/xm-picker&gt
        
          &ltscript&gt
          export default {
            data() {
              return {
                yearSlot: [
                  {
                    flex: 1,
                    values: [
                      "1984",
                      "1985",
                      "1986",
                      "1987",
                      "1988",
                      "1989",
                      "1990",
                      "1991",
                      "1992",
                      "1993",
                      "1994",
                      "1995"
                    ],
                    className: "slot1"
                  }
                ],
                year: "2018"
              };
            },
            methods: {
              onYearChange(picker, values) {
                this.year = values[0];
              }
            }
          };
          &lt/script&gt
        </code>
      </pre>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      yearSlot: [
        {
          flex: 1,
          values: [
            "1984",
            "1985",
            "1986",
            "1987",
            "1988",
            "1989",
            "1990",
            "1991",
            "1992",
            "1993",
            "1994",
            "1995"
          ],
          className: "slot1"
        }
      ],
      year: "2018"
    };
  },
  methods: {
    onYearChange(picker, values) {
      this.year = values[0];
    }
  }
};
</script>

<style lang="less" scoped>
.c-header-back {
  width: 0.14rem;
  height: 0.14rem;
}
h4 {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  background-color: #e9e9e9;
  padding: 10px;
  margin: 20px 0;
}
p {
  text-align: left;
  padding: 0.5em 0;
}
.c-code--multiline {
  display: block;
  padding: 0.5em 1em;
  border-radius: 4px;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}
.demo-markup-source {
  text-align: left;
}
.c-code {
  font-size: 0.8em;
}
</style>